<template>
  <div class="banner">
    <!--<el-carousel :interval="5000" arrow="always" height="500px" >-->
    <!--<el-carousel-item v-for="(item, key) in banner" :key="key">-->
    <!--&lt;!&ndash;<router-link :to="{path:'/indexWorkDynamicst',query: {contentId: item.contentId}}">&ndash;&gt;-->
    <!--<div class="banner-imgbox">-->
    <!--<img :src="item.showImageUrl" @click="jump(item)" style="cursor: pointer">-->
    <!--</div>-->
    <!--&lt;!&ndash;</router-link>&ndash;&gt;-->
    <!--</el-carousel-item>-->
    <!--</el-carousel>-->
    <!--mobile-->
    <!--<swipe class="t-l-carousel mobile" :auto="3000" :continuous="true">-->
    <!--<swipe-item v-for="(item, key) in banner" :key="key" style="position: relative">-->
    <!--<div class="t-l-box">-->
    <!--<div class="t-l-c-top banner-imgbox">-->
    <!--&lt;!&ndash;<div class="t-l-c-l"></div>&ndash;&gt;-->
    <!--&lt;!&ndash;<div class="t-l-c-r"></div>&ndash;&gt;-->
    <!--<img :src="item.showImageUrl" @click="jump(item)" @touch="jump(item)" style="cursor: pointer">-->
    <!--&lt;!&ndash;<i class="icon-spot left-icon"></i>&ndash;&gt;-->
    <!--&lt;!&ndash;<i class="icon-spot right-icon"></i>&ndash;&gt;-->
    <!--</div>-->
    <!--&lt;!&ndash;<div class="t-l-c-down">&ndash;&gt;-->
    <!--&lt;!&ndash;<div class="t-l-c-l">{{item.time}}</div>&ndash;&gt;-->
    <!--&lt;!&ndash;<div class="t-l-c-r" v-for="(arr,k) in item.data" >{{arr.title}}</div>&ndash;&gt;-->
    <!--&lt;!&ndash;</div>&ndash;&gt;-->
    <!--<div class="banner_title" @click="jump(item)" style="cursor: pointer">-->
    <!--<span>{{item.title}}</span>-->
    <!--<p>{{$bw.format(item.updateTime,'dateTime')}}</p>-->
    <!--</div>-->
    <!--</div>-->
    <!--</swipe-item>-->
    <!--</swipe>-->
    <!--newmobile-->
    <wc-swiper v-if='banner.length' class="mobile" :autoplay="true">
      <wc-slide v-for="(item, key) in banner" :key="key" class="banner-imgbox">
        <img :src="item.showImageUrl" @click="jump(item)" style="cursor: pointer">
        <div class="banner_title" @click="jump(item)" style="cursor: pointer">
          <span>{{item.title}}</span>
          <!--<p>{{$bw.format(item.updateTime,'dateTime')}}</p>-->
        </div>
      </wc-slide>
    </wc-swiper>
    <!--<swipe>-->
    <!--<swipe-item v-for="(item, key) in banner">-->
    <!--<img :src="item.showImageUrl" @click="jump(item)" style="cursor: pointer;height: 80%">-->
    <!--<div>{{item.title}}</div>-->
    <!--</swipe-item>-->
    <!--</swipe>-->
    <!--pc-->
    <swiper :options="swiperOption" ref="mySwiper" class="banner-imgbox pc">
      <!-- slides -->
      <!--<swiper-slide  v-bind:style="{backgroundImage: 'url(' + item.showImageUrl + ')'}"  ></swiper-slide>-->
      <swiper-slide v-for="(item, key) in banner" :key="key" class="banner-imgbox">
        <div class="imgWrap">
          <img :src="item.showImageUrl" style="cursor: pointer" @click="jump(item)">
        </div>
        <div class="banner_title" @click="jump(item)" style="cursor: pointer">
          <span>{{item.title}}</span>
          <!--<p>{{$bw.format(item.updateTime,'dateTime')}}</p>-->
        </div>
      </swiper-slide>
      <!--<swiper-slide>ddss</swiper-slide>-->
      <!-- Optional controls -->
      <!--<img :src="item.showImageUrl" @click="jump(item)" style="cursor: pointer">-->
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
      <!--<div class="swiper-scrollbar"   slot="scrollbar"></div>-->
    </swiper>
    <!--mobile-->
    <!--<div class="mobile xx">-->
    <!--<div class="swiper-wrapper">-->
    <!--<div class="swiper-slide" v-for="(item, key) in banner" :key="key">-->
    <!--&lt;!&ndash;<div class="banner-imgbox">&ndash;&gt;-->
    <!--<img :src="item.showImageUrl" alt="">-->
    <!--&lt;!&ndash;</div>&ndash;&gt;-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
  </div>
</template>
<script>
//  import  Swiper from './../common/swiper-3.4.2.min.js'
import Swiper from './../../static/swiper-3.4.2.min.js'
import './../../static/swiper-3.4.2.min.css'
export default {
  data() {
    return {
      banner: [],
      swiperOption: {
        autoplay: 3000,
        autoplayDisableOnInteraction: false,
        prevButton: '.swiper-button-prev', //上一张
        nextButton: '.swiper-button-next', //下一张
      }
    }
  },
  components: {},
  methods: {
    initSwiper: function() {
      const self = this;
      let ss = new Swiper(".xx", {
        //        loop: 0,
        //        onSlideChangeEnd: function(swiper) {
        //          self.sliderInx = swiper.activeIndex;
        //        },/
        onInit: function(swiper) {
          //Swiper初始化了
          //           alert("init " + swiper.activeIndex);
        },
        autoplay: 1000,
        // pagination: '.swiper-pagination',
        //可选选项，自动滑动
      });
    },

    jump(item) {
      if (item.isOriginal) {
        if (item.styleCode.indexOf('http') >= 0) {
          window.open(item.styleCode)
        } else {
          window.open("http://" + item.styleCode)
        }
      } else {
        this.$router.push({ path: '/indexWorkDynamicst', query: { contentId: item.styleCode } })
      }
    },
    init() {
      this.$service('/api/CMSMain/GetContentLists', 'post', {
        "Filter": [{
            "GroupName": "typep",
            "FieldName": "PlatformType",
            "FieldValue": 0,
            "SqlOperator": 3,
            "IsQuery": true
          },
          {
            "GroupName": "categoryType",
            "FieldName": "categoryType",
            "FieldValue": "Ads",
            "SqlOperator": 3,
            "IsQuery": true
          }
        ]
      }).then((response) => {
        this.banner = response.Data;
        console.info(response.Data)
      })
    },
  },
  mounted() {
    this.init();
    this.$nextTick(function() {
      this.initSwiper()
    })
  },
}

</script>
<style scoped lang="less">
/*@import url('./../../static/swiper-3.4.2.min.css');*/


/*.swiper-slide{*/


/*width: 750px!important;*/


/*}*/


/*.banner{*/


/*height: 300px;*/


/*width:100%;*/


/*}*/

@media screen and (min-width: 829px) {
  .mobile {
    display: none;
  }
  .pc {
    display: block;
  }
  .banner-imgbox {
    /*border: 1px solid blue;*/
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
    vertical-align: middle;
  }
  .imgWrap {
    text-align: center;
    vertical-align: middle;
    img {
      width: 100%;
    }
  }
  .banner_title {
    /*margin-top: 3.57rem;*/
    /*line-height: 3.57rem;*/
    /*height: 3.57rem;*/
    width: 80%;
    margin-left: 10%;
    line-height: 6rem;
    height: 5rem;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    span {
      font-size: 1.29rem;
      color: rgba(83, 48, 15, 1);
    }
    p {
      display: none;
    }
  }
  .swiper-button-prev,
  .swiper-button-next {
    position: absolute;
    top: 100%;
    transform: translate(0,-1.1rem);
    width: 0.86rem;
    height: 1.43rem;
    z-index: 10;
    cursor: pointer;
    -moz-background-size: 0.86rem 1.43rem;
    -webkit-background-size: 0.86rem 1.43rem;
    background-size: 0.86rem 1.43rem;
    background-position: center;
    background-repeat: no-repeat;
  }
}

@media screen and (max-width: 829px) {
  .pc {
    display: none;
  }
  .mobile {
    display: block;
  }
  .xx {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .t-l-box {
    position: relative;
  }
  .banner_title {
    position: absolute;
    bottom: 0%;
    height: 1.2rem;
    width: 100%;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 0, 0.01)), to(#000000));
    text-align: center;
    span {
      font-size: 0.3rem;
      font-family: PingFang-SC-Medium;
      color: rgba(255, 255, 255, 1);
      padding-left: 0.3rem;
      padding-top: 0.28rem;
    }
    p {
      /*width:187px;*/
      /*height:14px;*/
      padding-left: 0.3rem;
      padding-top: 0.19rem;
      font-size: 0.18rem;
      font-family: PingFang-SC-Medium;
      color: rgba(255, 255, 255, 1);
      /*line-height:30px;*/
    }
  }
}

.t-l-carousel {
  /*position: relative;*/
}

.banner,
.t-l-carousel,
.t-l-box {
  width: 100%;
  height: 100%;
}

.banner-imgbox {
  /*border: 1px solid blue;*/
  width: 100%;
  height: 100%;
  position: relative;
  /*display: flex;*/
  /*align-items: center;*/
  /*justify-items: center;*/
  text-align: center;
  vertical-align: middle;
  img {
    width: 100%;
    height: 100%
  }
}

.swiper-container {
  /*overflow-x: hidden;*/
  /*overflow-y: visible;*/
}


/*.mint-swipe{*/


/*overflow: visible !important;*/


/*}*/


/*.mint-swipe-items-wrap{*/


/*overflow: visible !important;*/


/*}*/

</style>
